<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
var ws=null,wc=null;
// 扩展API加载完毕，现在可以正常调用扩展API 
function plusReady(){
	ws=plus.webview.currentWebview();
	// 用户点击后
	ws.addEventListener("maskClick",function(){
		wc.close("auto");
	},false);
}
// 判断扩展API是否准备，否则监听"plusready"事件
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 显示侧滑页面
function showSide(){
	// 防止快速点击可能导致多次创建
	if(wc){
		return;
	}
	// 开启遮罩
	ws.setStyle({mask:"rgba(0,0,0,0.5)"});
	// 创建侧滑页面
	wc=plus.webview.create("webview_mask_side.html","side",{left:"30%",width:"70%",popGesture:"none"});
	// 侧滑页面关闭后关闭遮罩
	wc.addEventListener('close',function(){
		ws.setStyle({mask:"none"});
		wc=null;
	},false);
	// 侧滑页面加载后显示（避免白屏）
	wc.addEventListener("loaded",function(){
		wc.show("slide-in-right",200);
	},false);
}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
	</head>
	<body>
		<header id="header">
			<div class="nvbt iback" onclick="back()"></div>
			<div class="nvtt">Webview Mask</div>
		</header>
		<div id="content" class="content">
			<br/>
			<div class="button" onclick="showSide()">打开侧滑窗口</div>
			<div class="des">打开侧滑窗口后，当前Webview窗口会显示遮罩层。</div>
			<div class="des">Webview的遮罩层会覆盖Webview中所有内容（包括子Webview），并且截获Webview窗口的所有触屏事件。</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/immersed.js" ></script>
</html>